<template>
  <div class='content'>
    <box-container :toolsShow='false'
                   class='bg-grey'>
      <dv-percent-pond :config="{ value: 66,
  lineDash: [10, 2]}"
                       style="width:200px;height:100px;" />
    </box-container>
    <box-container :toolsShow='false'
                   class='bg-grey'>
      <dv-percent-pond :config="{   value: 66,
  colors: ['#01c4f9', '#c135ff'],
  lineDash}"
                       style="width:200px;height:100px;" />
    </box-container>
  </div>
</template>
<script>
import boxContainer from '../common/box-container'

export default {
  components: {
    'box-container': boxContainer,
  },
  data () {
    return {
      fullWidth: 300,
      borderGap: 3,
      borderWidth: 3,
      pieceLength: [0.25, 0.5, 0.25],
      pieceGap: 3,
      usefulWidth:this.fullWidth - (this.borderGap + this.borderWidth) * 2
    }
  },
  mounted () {
    // this.$Notice.open({
    //   title: '注意',
    //   desc: '当前部分盒容器背景图片尺寸非标准，暂无尺寸规范，坐等标准',
    //   duration: 0,
    // });
  },
  computed: {
    lineDash() {
    return  this.pieceLength.map(l => [this.usefulWidth * l, this.pieceGap]).reduce((all, current) => [...all, ...current], [])
    },
    // usefulWidth(){
    //   return this.fullWidth - (this.borderGap + this.borderWidth) * 2
    // }
  },
  beforeDestroy () {

  },
}
</script>
<style lang="scss" scoped>
@import "./box.scss";
</style>

